<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{margin: 0;padding: 0;}
        /* 等高布局 */
        /* #parent{border: 10px solid black;overflow: hidden;width: 500px;}
        #box1{float: left; width: 100px;background: red;margin-bottom: -2000px; padding-bottom: 2000px;}
        #box2{float: right; width: 100px;background: blue;margin-bottom: -2000px; padding-bottom: 2000px;} */
        /* 双飞翼布局 */
        /* .header{height: 50px;background: black;}
        .container .center{width: 100%;height: 100px;float: left;}
        .container .center p{height: 100%;background: blueviolet;margin: 0 150px 0 100px;}
        .container .left{width: 100px;height: 100px;float: left;background: chartreuse;margin-left: -100%;}
        .container .right{width: 150px;height: 100px;float: left;background: darkcyan;margin-left: -150px;} */
        /* 圣杯布局 */
        .header{height: 50px;background: black;}
        .clear::after{content: "";display: block;clear: both;}
        .container{margin: 0 150px 0 100px; background: blueviolet;}
        .container .center{width: 100%;height: 100px;float: left;}
        .container .left{width: 100px;height: 100px;float: left;background: chartreuse;margin-left: -100%;position: relative;
        left: -100px;}
        .container .right{width: 150px;height: 100px;float: left;background: darkcyan;margin-left: -150px;position: relative;
        right: -150px;} 
    </style>
</head>
<body>
    <!-- <div id="parent">
        <div id="box1">
            <p>hello</p>
            <p>hello</p>
            <p>hello</p>
            <p>hello</p>
            <p>hello</p>
            <p>hello</p>
            <p>hello</p>
        </div>
        <div id="box2">
            <p>word</p>
            <p>word</p>
            <p>word</p>
            <p>word</p>
            <p>word</p>
            <p>word</p>
            <p>word</p>
            <p>word</p>
            <p>word</p>
            <p>word</p>
        </div>
    </div> -->
    <!-- <div class="header"></div>
    <div class="container">
        <div class="center">
            <p>内容展示</p>
        </div>
        <div class="left"></div>
        <div class="right"></div>
   </div> -->
   <div class="header"></div>
    <div class="container clear">
        <div class="center">
            <p>内容展示</p>
        </div>
        <div class="left"></div>
        <div class="right"></div>
   </div>
</body>
</html>